import React from 'react';
import { Plus, BarChart3, Timer, User } from 'lucide-react';

type Tab = 'record' | 'stats' | 'timer' | 'profile';

interface NavigationProps {
  activeTab: Tab;
  onTabChange: (tab: Tab) => void;
}

const Navigation: React.FC<NavigationProps> = ({ activeTab, onTabChange }) => {
  const tabs = [
    { id: 'record' as Tab, label: '记录摸鱼', icon: Plus, color: 'from-blue-500 to-purple-500' },
    { id: 'stats' as Tab, label: '数据统计', icon: BarChart3, color: 'from-green-500 to-teal-500' },
    { id: 'timer' as Tab, label: '摸鱼计时', icon: Timer, color: 'from-orange-500 to-red-500' },
    { id: 'profile' as Tab, label: '个人档案', icon: User, color: 'from-purple-500 to-pink-500' }
  ];

  return (
    <nav className="bg-white rounded-lg shadow-md p-1 mb-6 animate-slide-up">
      <div className="flex">
        {tabs.map((tab, index) => {
          const Icon = tab.icon;
          return (
            <button
              key={tab.id}
              onClick={() => onTabChange(tab.id)}
              className={`flex-1 flex items-center justify-center gap-2 py-3 px-4 rounded-md transition-all duration-300 transform hover:scale-105 active:scale-95 animate-fade-in-up ${
                activeTab === tab.id
                  ? `bg-gradient-to-r ${tab.color} text-white shadow-lg animate-pulse-gentle`
                  : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 hover:shadow-md'
              }`}
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <Icon className={`h-4 w-4 transition-transform duration-200 ${activeTab === tab.id ? 'animate-bounce-gentle' : 'hover:rotate-12'}`} />
              <span className="font-medium">{tab.label}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
};

export default Navigation;